<template>
  <div class="app-container">
    <!-- 现场采集弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <div class="left" v-for="(item,index) in form_col" :key="index">
          <el-form-item :label="item.title" :prop="item.prop">
            <el-input v-if="item.type === 'input'" v-model="form[item.prop]" :placeholder="item.placeholder" size="mini" />
            <el-select v-if="item.type === 'select'" v-model="form[item.prop]" :placeholder="item.placeholder" clearable size="mini" style="width:100%">
              <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
            <el-date-picker v-if="item.type === 'date'" v-model="form[item.prop]" type="date" size="mini" :placeholder="item.placeholder" value-format="yyyy-MM-dd" style="width:100%">
            </el-date-picker>
            <el-upload v-if="item.type==='img'" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="mini">上 传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  dicts: ['sys_normal_disable'],
  data() {
    return {
      title: '新增',
      open: false,
      form: {
        name: ''
      },
      form_col: [{ title: '项目名称', prop: 'name', type: 'input', placeholder: '请选择', options: [{ label: "I级", value: '0' }], show: true, disabled: false },
      { title: '照片文件', prop: 'name', type: 'img', placeholder: '请选择', options: [], show: true, disabled: false },
      { title: '照片时间', prop: 'name', type: 'date', placeholder: '请选择', options: [], show: true, disabled: false },
      { title: '状态', prop: 'name', type: 'select', placeholder: '请选择', options: [], show: true, disabled: false },
      { title: '备注', prop: 'name', type: 'input', placeholder: '请选择', options: [], show: true, disabled: false }],
      rules: {}
    }
  },
  methods: {
    init() {
      this.open = true;
    },
    submitForm() { },
    cancel() {
      this.open = false;
    }
  }
}
</script>

<style lang="scss">
.el-upload--picture-card {
  width: 100%;
  height: 50px;
  line-height: 55px;
}
</style>